<!DOCTYPE html>
<html lang="UTF-8">
<head>

    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <link rel="stylesheet" href="${path}yq-big/static/css/el-com.css">
    <link rel="stylesheet" href="${path}yq-big/static/css/style.css">

    <script src="//unpkg.com/vue@next"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1> This is User list page: ${title}</h1>
<!--<script src="${path}ws.js"></script>-->
<!--<#b:for data="${items}" var="item,status">-->
<!--<tr>-->
<!--    <td>${status.num}</td>-->
<!--    <td>${item.id}</td>-->
<!--    <td>${item.name}</td>-->
<!--    <td>${item.createTime,'yyyy-MM-dd HH:mm:ss'}</td>-->
<!--</tr>-->
<!--</#b:for>-->
<!--</table>-->
<div id="list">
    <big-page :table-detail="tableDetail" :pagination-detail="paginationDetail" :operation-detail="operationDetail" style="padding: 10px" @change-page="changePage">

    </big-page>
</div>
<script type="module">
    import bigPage from '${path}yq-big/components/page/bigPage.js'
    import request from '${path}yq-big/utils/request.js'
    let demo = ${@jsKit.commonJs()};
    const List = {
        data(){
          return{
              operationDetail:[{
                  value: '${bb}',//按钮显示内容
                  type: 'primary',//按钮类型
                  plain: true,//按钮朴素
                  beforeIcon: 'Search',//按钮前图标
              },{
                  value: '添加',//按钮显示内容
                  type: 'primary',//按钮类型
                  plain: true,//按钮朴素
                  method: this.btnClick//按钮点击触发事件
              }],


              tableDetail:{
                  operationDetail: [
                      {
                          name: '详情',//按钮显示内容
                          icon: 'Place',//按钮前图标
                      },{
                          type:'conceal',//操作台下拉
                          name:'更多',
                          icon: 'Orange',
                          detail:[//下拉数据
                              {
                                  name: '修改数据',
                              }, {
                                  name: '删除',
                                  icon: 'Delete',
                              }
                          ]
                      },
                  ],
                  tableLayout: {
                      selected: true, //表格复选框
                  },
                  tableData:  ${@jsKit.parser(items)},
                  tableLabel: [
                      {
                          label:"编号",
                          prop: 'id',
                      },{
                          label:"姓名",
                          prop: 'name',
                      },{
                          label:"创建时间",
                          prop: 'createTime',
                      }
                  ]
              },

              paginationDetail: {
                  pageSize: 10,
                  pageNum: 1,
                  total: 200,
              },
          }
        },
        components:{
            bigPage
        },
        methods: {
            btnClick(){
                console.log('btn被点击')

            },

            changePage(){
                console.log(this.paginationDetail)
                this.getList()
            },

            getList(){
                let data={
                    pageNum:this.paginationDetail.pageNum,
                    pageSize:this.paginationDetail.pageSize,
                }
                console.log('getList')
            }
        }
    };

    const list = Vue.createApp(List);
    list.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        list.component(key, component)
    }
    list.mount("#list");
</script>
</body>
</html>
